import React, { useState, useEffect } from 'react'
import { EditOutlined, DeleteOutlined } from "@ant-design/icons"
import { Modal, message } from "antd"
import {withRouter} from "react-router-dom"
import { deleteAnswer,getANswerContext } from "../../api/ask"
 function MyAnswerItem(props) {
    const [deteleFlag, setDeteleFlag] = useState(false)
    const [emitFlag,setEmitFlag] = useState(false)
    const deleteAnswers = async () => {
        let res = await deleteAnswer({ answerReplyId: props.item.answerId })
        if (res.data.code === 403) {
            message.warn(res.data.msg)
        } else {
            props.init()
            message.success(res.data.msg)
        }
        setDeteleFlag(false)
    }
    const emitAnswers = () => {
        setEmitFlag(false)
    }
    const openEmit =async() => {
        setEmitFlag(true)
        let res = await getANswerContext({answerReplyId:props.item.answerId})
        if(res.data.code===403){
            message.warn(res.data.msg)
            setEmitFlag(false)
        }
    }
    return (
        <div key={props.item.replyId} className="somethingItem">
            <div>
                <p>
                    <img alt="" src={props.item.avatar} />
                    <span>{props.item.qUserName}</span>
                    <span>{props.item.replyTime}</span>
                </p>
                <p onClick={()=>{
                    props.history.push("/home/askdetail/"+props.item.answerId)
                }}>{props.item.replyContext}</p>
                <p>{props.item.questionTitle}</p>
                <p>{props.item.questionContent}</p>
            </div>
            <div>
                <p><EditOutlined onClick={() => openEmit()}/><DeleteOutlined onClick={() => setDeteleFlag(true)} /></p>
                <p onClick={()=>{
                    props.history.push("/home/askdetail/"+props.item.answerId)
                }}>查看全部</p>
            </div>
            <Modal title="删除" visible={deteleFlag} okText="确认删除" cancelText="取消" onOk={deleteAnswers} onCancel={() => {
                setDeteleFlag(false)
            }}>
                <p>你确定要删除吗</p>
            </Modal>
            <Modal title="编辑" visible={emitFlag} okText="确认编辑" cancelText="取消" onOk={emitAnswers} onCancel={() => {
                setEmitFlag(false)
            }}>
                <p>你确定要编辑吗</p>
                <textarea style={{width:"400px",height:"300px"}}/>
            </Modal>
        </div>
    )
}
export default withRouter(MyAnswerItem)
